<div style="margin-top:45px;" v-if="status">

	<!-- 图标 -->
	<a-alert v-if="!status.connect"
		message="警告"
		description="老虎机掉线啦！！！"
		type="warning"
		showIcon
	></a-alert>
	
	<a-descriptions title="修改摇奖范围和各数值权重" style="margin-top:30px;"></a-descriptions>
	<a-row>
		<p>
			<a-button-group>
				<a-button                :disabled="!this.edited" @click="btnValueReset" >重置全部数值</a-button>
				<a-button type="primary" :disabled="!this.edited" @click="btnValueSubmit">提交</a-button>
			</a-button-group>
			&emsp;
			<i v-show="this.edited">
				摇奖数值的范围和摇到各个数值的概率，可以在下面修改；最后别忘了点 <b style="color:crimson;">提交</b> 按钮！否则不会生效！
			</i>
		</p>
		<a-col :span="14">
			<a-slider style="margin-left: 16px" range v-model="sliderRange" :min="0" :max="999" :step="1" 
				@afterChange="onRangeChange"/>
		</a-col>
		<a-col :span="10">
			<a-input-number
				v-model="sliderRange[0]"
				:min="0"
				:max="999"
				:step="1"
				style="margin-left: 16px"
				@change="onRangeChange"
			></a-input-number> 到
			<a-input-number
				v-model="sliderRange[1]"
				:min="0"
				:max="999"
				:step="1"
				@change="onRangeChange"
			></a-input-number>
		</a-col>
	</a-row>

	<a-table :columns="columns" :data-source="data" style="margin-top: 16px">
    <span slot="name" slot-scope="text">{{ text }}</span>
    <span slot="customTitle"><a-icon type="smile-o" /> 数值</span>
    <a-row slot="weight" slot-scope="text, record" style="min-width: 300px;">
			<a-col :span="18">
				<a-slider style="margin-top: 6px;" @afterChange="changeData(false, true)"
					v-model="record.weight" :min="0" :max="100" :step="1" />
			</a-col>
			<a-col :span="6" style="padding-left: 10px;">
				<a-tag color="blue" v-if="record.weight == 10"> {{ record.weight }} </a-tag>
				<a-tag color="black" v-else-if="record.weight == 0"> {{ record.weight }} </a-tag>
				<a-tag color="green" v-else-if="record.weight < 10"> {{ record.weight }} </a-tag>
				<a-tag color="orange" v-else-if="record.weight < 31"> {{ record.weight }} </a-tag>
				<a-tag color="red" v-else> {{ record.weight }} </a-tag>
			</a-col>
    </a-row>
    <span slot="action" slot-scope="text, record">
			<a-button-group>
				<a-button @click="btnItemReset(record)">重置</a-button>
				<a-tooltip placement="topLeft">
					<template slot="title">
						<span>权重变成 0，这个数就不会被摇到</span>
					</template>
					<a-button @click="btnItemZero(record)" >清零</a-button>
				</a-tooltip>
			</a-button-group>
    </span>
  </a-table>

</div>
